<template>
    <div class="box">
        <div class="item">
            <span>旧密码：</span>
            <div>
                <el-input type="password" v-model="oldPwd" placeholder="请输入原始密码"></el-input>
            </div>
        </div>
        <div class="item">
            <span>新密码：</span>
            <div>
                <el-input type="password" v-model="newPwd" placeholder="请输入新密码"></el-input>
            </div>
        </div>
        <div class="item">
            <span>确认密码：</span>
            <div>
                <el-input type="password" v-model="confPwd" placeholder="确认新密码"></el-input>
            </div>
        </div>
        <div class="item">
            <span></span>
            <el-button type="primary" @click="editPwd">修改</el-button>
            <el-button type="default" @click="clearPwd">重置</el-button>
        </div>
    </div>
</template>

<script>
    import {reactive, toRefs} from 'vue'
    import {ElMessage} from 'element-plus'
    import api from "../../api";
    export default {
        name: "ResetPwd",
        setup() {
            let data = reactive({
                oldPwd: '',
                newPwd: '',
                confPwd: ''
            })
            // 修改密码
            let editPwd = async () => {
                if (!data.newPwd) {
                    ElMessage.warning('请输入旧密码')
                    return false
                } else if (!data.newPwd) {
                    ElMessage.warning('请输入新密码')
                    return false
                } else if (data.newPwd.length < 6) {
                    ElMessage.warning('新密码长度大于6位数')
                    return false
                }else if (data.newPwd!=data.confPwd){
                    ElMessage.warning('两次密码不一致')
                    return false
                }
                // 判断输入的旧密码和数据量的密码是否一致
                const {data:res}= await api.getPwd()
                if (res.status===200&&res.result[0].password!=data.oldPwd){
                    ElMessage.warning('输入的旧密码错误')
                    return false
                }
              api.getResetPwd({password:data.newPwd}).then(res=>{
                  if (res.data.status===200){
                      ElMessage.success('修改成功')
                      data.oldPwd = ''
                      data.newPwd = ''
                      data.confPwd = ''
                  }else {
                      ElMessage.error('修改失败')
                  }
              })
            }
            // 清空
            let clearPwd = () => {
                data.oldPwd = ''
                data.newPwd = ''
                data.confPwd = ''
            }
            return {
                ...toRefs(data),
                editPwd, clearPwd

            }
        }
    }
</script>

<style scoped lang="scss">
    .box {
        width: 500px;

        .item {
            display: flex;
            font-size: 14px;
            align-items: center;
            margin-bottom: 10px;

            span {
                width: 70px;
                text-align: right;
            }

            div {
                flex: 1;
            }

        }
    }
</style>
